<template>
  <view class="login_container">
    <view class="imgBox">
      <view class="logoImg">
        <!-- <image
          class="imgLogo"
          src="http://ww1.sinaimg.cn/large/005NUwyggy1gtjwf81eecj606a0kdmyl02.jpg"
          mode="scaleToFill"
          lazy-load="false"
        ></image> -->

        <image
          mode="scaleToFill"
          lazy-load="false"
          class="imgLogo"
          src="http://ww1.sinaimg.cn/large/005NUwyggy1gtjwg83hjjj60au0k4dhx02.jpg"
        ></image>
      </view>
    </view>
    <view class="authBtn">
      <u-form :model="form" ref="uForm">
        <u-form-item label="昵称" prop="userName">
          <u-input v-model="form.userName" />
        </u-form-item>
        <u-form-item label="电话" prop="userTel">
          <u-input v-model="form.userTel" />
        </u-form-item>
        <u-form-item label="密码" prop="userPassword">
          <u-input v-model="form.userPassword" />
        </u-form-item>
      </u-form>
      <view class="loginBtn">
        <u-button @click="submit('logIn')">登入</u-button>
        <u-button @click="submit('signIn')">注册</u-button>
      </view>

      <!-- <u-button class="loginBtn" @click="loginAuth">微信授权登入</u-button> -->
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        userTel: "",
        userPassword: "",
        userName: "",
      },
      rules: {
        userTel: [
          {
            required: true,
            message: "请输入手机号",
            // 可以单个或者同时写两个触发验证方式
            trigger: ["change", "blur"],
          },
        ],
        userPassword: [
          {
            required: true,
            min: 3,
            message: "请输入密码，不少于3位数",
            trigger: "change",
          },
        ],
        userName: [
          {
            required: true,
            min: 3,
            message: "请输入用户名",
            trigger: "change",
          },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    //用户注册
    signIn(userTel, userPassword, userName) {
      this.$http({
        url: "/addUser",
        data: { userTel, userPassword, userName },
        method: "post",
      }).then((res) => {
        if (res.data.error == 0) {
          let userId = res.data.data.insertId;

          this.$http({
            url: "/searchUserById",
            data: { userId },
            method: "post",
          }).then((res) => {
            uni.switchTab({ url: "/pages/Mine/Mine" });
            uni.setStorage({
              key: "userInfo",
              data: res.data.data[0],
            });
          });
        } else {
          cosnole.log("用户注册失败");
        }
      });
    },

    logIn(userTel, userPassword, userName) {
      //如果用户存在则显示直接登入
      //如果用户不存在则让用户点击注册按钮
      this.$http({
        url: "/searchUser",
        data: { userTel, userPassword, userName },
        method: "post",
      }).then((res) => {
        //登入成功
        if (res.data.error == 0) {
          this.loginSuccess();
          uni.switchTab({ url: "/pages/Mine/Mine" });
          uni.setStorage({
            key: "userInfo",
            data: res.data.data[0],
          });
        } else {
          //登入失败
          this.loginFail();
        }
      });
    },

    submit(type) {
      const { userTel, userPassword, userName } = this.form;
      if (type == "logIn") {
        this.$refs.uForm.validate((valid) => {
          if (valid) {
            this.logIn(userTel, userPassword, userName);
          } else {
            console.log("验证失败");
          }
        });
      }
      if (type == "signIn") {
        this.$refs.uForm.validate((valid) => {
          if (valid) {
            this.signIn(userTel, userPassword, userName);
          } else {
            console.log("验证失败");
          }
        });
      }
    },

    loginSuccess() {
      this.$refs.uToast.show({
        title: "登录成功",
        type: "success",
        // url: "/pages/Mine/Mine",
      });
    },

    loginFail() {
      this.$refs.uToast.show({
        title: "用户信息错误",
        type: "error",
      });
    },
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
};
</script>

<style scoped lang="less">
.login_container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  height: 100vh;

  .imgBox {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .logoImg {
      display: flex;
      align-items: center;
      justify-content: center;
      .imgLogo {
        width: 300rpx;
        height: 600rpx;
      }
    }

    title {
    }
  }

  .authBtn {
    .loginBtn {
      display: flex;
      justify-content: space-around;
      margin-top: 20rpx;
    }
  }
}
</style>
